<template>
    <view class="ticket">
        <view class="ticket-title">选择购票方式</view>
        <view class="ticket-li" :class="{ 'ticket-li2': !isPreferTicket }" @click="radioClick(1)">
            <view class="radios">
                <u-icon v-if="radioValue == 1" name="checkmark-circle-fill" size="20" color="#ff8e0c"></u-icon>
                <u-icon v-else name="checkmark-circle" size="20" :color="isPreferTicket ? '#ccc' : '#999'"></u-icon>
            </view>
            <view class="ticket-right">
                <view class="ticket-top">
                    <view class="ticket-name" :class="{ 'ticket-name2': !isPreferTicket }">特惠购票</view>
                </view>
                <view class="ticket-price" :class="{ 'ticket-name2': !isPreferTicket }">约 ¥ {{ parseFloat(singlePrice).toFixed(2) || 0 }}/张</view>
                <view class="ticket-tips" :class="{ 'ticket-name2': !isPreferTicket }">
                    <text>提前两个小时购票才能使用此功能，</text>
                    <text class="ticket-c1" :class="{ 'ticket-name2': !isPreferTicket }">提交订单后可叠加优惠券</text>
                    <text>，出票时间10-60分钟，平均时间</text>
                    <text class="ticket-txt" :class="{ 'ticket-name2': !isPreferTicket }">15分钟</text>
                    <text>，付款后</text>
                    <text class="ticket-txt" :class="{ 'ticket-name2': !isPreferTicket }">不能退、改</text>
                    <text>，出票失败钱会原路返回</text>
                    <!-- <text>票价优惠大，出票时间需要10-60分钟，平均时间</text>
					<text class="ticket-txt" :class="{'ticket-name2' :isPreferTicket}">15分钟</text>
					<text>，付款后订单</text>
					<text class="ticket-txt" :class="{'ticket-name2' :isPreferTicket}">不可改票，退款</text>
					<text>，未成功出票原路返回</text> -->
                </view>
            </view>
        </view>
        <u-gap height="30rpx" bgColor="#f6f6f6"></u-gap>
        <view class="ticket-li" @click="radioClick(2)">
            <view class="radios">
                <u-icon v-if="radioValue == 2" name="checkmark-circle-fill" size="20" color="#ff8e0c"></u-icon>
                <u-icon v-else name="checkmark-circle" size="20" color="#ccc"></u-icon>
            </view>
            <view class="ticket-right">
                <view class="ticket-top">
                    <view class="ticket-name">快速出票</view>
                </view>
                <view class="ticket-price">约 ¥ {{ parseFloat(fastPrice).toFixed(2) || 0 }}/张</view>
                <view class="ticket-tips">
                    <text>实时锁坐，方便快捷，出票时间约1-10分钟，平均时间</text>
                    <text class="ticket-txt">3分钟</text>
                    <text>，付款后订单</text>
                    <text class="ticket-txt">不可改票，退款</text>
                    <text>，未成功出票15分钟退回</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        singlePrice: {
            type: Number,
            default: 0,
        },
        fastPrice: {
            type: Number,
            default: 0,
        },
        shengPrice: {
            type: Number,
            default: 0,
        },
        isPreferTicket: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
        isPreferTicket: {
            handler() {
                if (!this.isPreferTicket) {
                    this.radioClick(2);
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            radioValue: 1,
        };
    },
    methods: {
        radioClick(e) {
            if (e == 1 && !this.isPreferTicket) {
                return getApp().globalData.subcontracting_movie.$utils.showToast('当前场次只能快速出票');
            }
            this.radioValue = e;
            this.$emit('change', e);
        },
    },
};
</script>

<style lang="scss" scoped>
.ticket {
    &-title {
        @include font(28rpx, #222, bold);
        margin-bottom: 20rpx;
    }
    &-li {
        padding: 30rpx;
        border-radius: 16rpx;
        background-color: #fff;
        display: flex;
        box-shadow: 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.07);
    }
    &-tag {
        padding: 4rpx 8rpx;
        background-color: #ff7900;
        border-radius: 6rpx;
        margin-left: 15rpx;
        @include font(24rpx, #fff);
    }
    &-sheng {
        margin-left: 10rpx;
        @include font(24rpx, #ff7900);
    }
    &-right {
        flex: 1;
        margin-left: 30rpx;
    }
    &-top {
        @include flexCenter;
        margin-bottom: 10rpx;
    }
    &-name {
        @include font(32rpx, #333);
    }
    &-price {
        @include font(26rpx, #ff1616, bold);
        margin-bottom: 10rpx;
    }
    &-tips {
        @include font(24rpx, #999999);
    }
    &-txt {
        @include font(24rpx, #333);
    }
    &-c1 {
        color: #ff1616;
    }
    &-name2 {
        color: #999999 !important;
    }
    &-tag2 {
        background-color: #999999 !important;
    }
    &-li2 {
        background-color: #eaeaea !important;
    }
}
</style>
